{% extends 'base/base.html' %}

{% block title %}为您推荐 - 妙趣拾光锦盒{% endblock %}

{% block extra_css %}
<style>
    .recommendation-card {
        border: none;
        border-radius: 15px;
        overflow: hidden;
        transition: transform 0.3s, box-shadow 0.3s;
        height: 100%;
    }
    
    .recommendation-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
    }
    
    .recommendation-img {
        height: 220px;
        object-fit: cover;
    }
    
    .recommendation-badge {
        position: absolute;
        top: 10px;
        right: 10px;
        font-size: 12px;
    }
    
    .recommendation-score {
        position: absolute;
        top: 10px;
        left: 10px;
        background-color: rgba(0, 0, 0, 0.6);
        color: white;
        border-radius: 20px;
        padding: 3px 8px;
        font-size: 12px;
    }
    
    .recommendation-reason {
        background-color: #f8f9fa;
        border-radius: 20px;
        padding: 5px 10px;
        font-size: 13px;
        color: #6c757d;
        margin-top: 10px;
        display: inline-block;
    }
    
    .no-recommendations {
        min-height: 300px;
    }
</style>
{% endblock %}

{% block content %}
<section class="py-5">
    <div class="container">
        <div class="mb-4">
            <h1 class="text-center mb-4">
                <i class="fas fa-magic me-2"></i>为您推荐的盲盒
            </h1>
            <p class="text-center text-muted">
                根据您的购买历史和浏览习惯，我们的AI智能推荐了以下盲盒
            </p>
        </div>
        
        {% if recommendations %}
        <div class="row row-cols-1 row-cols-md-2 row-cols-lg-4 g-4">
            {% for rec in recommendations %}
            <div class="col">
                <div class="card recommendation-card shadow-sm h-100">
                    <div class="position-relative">
                        <a href="{% url 'blindbox:detail' box_id=rec.box_id %}" 
                           onclick="logRecommendationClick({{ rec.recommendation_id|default:'null' }}, {{ rec.box_id }})">
                            <img src="{{ rec.box_image }}" 
                                 class="card-img-top recommendation-img" 
                                 alt="{{ rec.box_name }}">
                        </a>
                        {% if rec.score >= 0.7 %}
                        <span class="badge bg-danger recommendation-badge">强烈推荐</span>
                        {% elif rec.score >= 0.5 %}
                        <span class="badge bg-primary recommendation-badge">推荐</span>
                        {% endif %}
                        
                        {% if rec.score > 0 %}
                        <span class="recommendation-score">
                            <i class="fas fa-star text-warning me-1"></i>{{ rec.score|floatformat:2 }}
                        </span>
                        {% endif %}
                    </div>
                    <div class="card-body d-flex flex-column">
                        <h5 class="card-title mb-1">
                            <a href="{% url 'blindbox:detail' box_id=rec.box_id %}" 
                               class="text-decoration-none text-dark"
                               onclick="logRecommendationClick({{ rec.recommendation_id|default:'null' }}, {{ rec.box_id }})">
                                {{ rec.box_name }}
                            </a>
                        </h5>
                        <p class="card-text text-muted mb-2">{{ rec.category }}</p>
                        
                        {% if rec.discount_price != rec.price %}
                        <div class="d-flex align-items-center mb-2">
                            <span class="text-danger fw-bold me-2">¥{{ rec.discount_price }}</span>
                            <span class="text-muted text-decoration-line-through">¥{{ rec.price }}</span>
                        </div>
                        {% else %}
                        <div class="mb-2">
                            <span class="fw-bold">¥{{ rec.price }}</span>
                        </div>
                        {% endif %}
                        
                        {% if rec.reason %}
                        <div class="mt-auto">
                            <div class="recommendation-reason">
                                <i class="fas fa-lightbulb text-warning me-1"></i>{{ rec.reason }}
                            </div>
                        </div>
                        {% endif %}
                    </div>
                    <div class="card-footer bg-white border-top-0">
                        <div class="d-grid">
                            <button class="btn btn-outline-primary btn-sm" 
                                    onclick="addToCart({{ rec.box_id }})">
                                <i class="fas fa-shopping-cart me-1"></i>加入购物车
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            {% endfor %}
        </div>
        {% else %}
        <div class="no-recommendations d-flex flex-column align-items-center justify-content-center">
            <img src="/static/img/empty-box.svg" alt="暂无推荐" style="width: 150px; margin-bottom: 20px;">
            <h4>暂无个性化推荐</h4>
            <p class="text-muted">随着您的浏览和购买，我们将为您推荐更多感兴趣的盲盒</p>
            <a href="{% url 'blindbox:list' %}" class="btn btn-primary mt-3">
                <i class="fas fa-boxes me-1"></i>浏览全部盲盒
            </a>
        </div>
        {% endif %}
    </div>
</section>
{% endblock %}

{% block extra_js %}
<script>
    function logRecommendationClick(recommendationId, boxId) {
        if (recommendationId) {
            // 如果有推荐ID，记录点击
            fetch(`/recommendations/log-click/${recommendationId}/`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded',
                    'X-CSRFToken': '{{ csrf_token }}'
                },
                body: `box_id=${boxId}`
            }).catch(error => console.error('Error logging recommendation click:', error));
        }
    }
    
    function addToCart(boxId) {
        // 添加到购物车
        fetch('/shopping/cart/add/', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded',
                'X-Requested-With': 'XMLHttpRequest',
                'X-CSRFToken': '{{ csrf_token }}'
            },
            body: `box_id=${boxId}&quantity=1`
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                // 更新购物车数量
                if (typeof updateCartCount === 'function') {
                    updateCartCount(data.cart_count);
                }
                
                // 显示成功消息
                showToast('成功添加到购物车', 'success');
                
                // 尝试添加飞入购物车动画
                try {
                    const cards = document.querySelectorAll('.recommendation-card');
                    let boxImage = null;
                    
                    for (let card of cards) {
                        const btn = card.querySelector('button');
                        if (btn && btn.onclick && btn.onclick.toString().includes(`addToCart(${boxId})`)) {
                            boxImage = card.querySelector('.recommendation-img');
                            break;
                        }
                    }
                    
                    if (boxImage && typeof flyToCart === 'function') {
                        flyToCart(boxImage);
                    }
                } catch (e) {
                    console.error('飞入购物车动画失败', e);
                }
            } else {
                showToast(data.message || '添加到购物车失败', 'error');
            }
        })
        .catch(error => {
            console.error('Error adding to cart:', error);
            showToast('添加到购物车时出错', 'error');
        });
    }
    
    function showToast(message, type = 'info') {
        // 简单的消息提示
        const toast = document.createElement('div');
        toast.className = `toast-message toast-${type}`;
        toast.innerText = message;
        
        document.body.appendChild(toast);
        
        setTimeout(() => {
            toast.classList.add('show');
        }, 10);
        
        setTimeout(() => {
            toast.classList.remove('show');
            setTimeout(() => {
                document.body.removeChild(toast);
            }, 300);
        }, 3000);
    }
</script>

<style>
    /* 消息提示样式 */
    .toast-message {
        position: fixed;
        top: 20px;
        right: 20px;
        padding: 12px 20px;
        background-color: #333;
        color: white;
        border-radius: 4px;
        z-index: 9999;
        opacity: 0;
        transform: translateY(-20px);
        transition: opacity 0.3s, transform 0.3s;
        max-width: 300px;
    }
    
    .toast-message.show {
        opacity: 1;
        transform: translateY(0);
    }
    
    .toast-success {
        background-color: #28a745;
    }
    
    .toast-error {
        background-color: #dc3545;
    }
    
    .toast-info {
        background-color: #17a2b8;
    }
</style>
{% endblock %} 